<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>

	<meta charset="UTF-8" />
	<title>VAOI || Articulos</title>
	<meta
		content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no'
		name='viewport' />

</h:head>

<h:body class="skin-green">

<ui:composition template="/USER/menuUser.xhtml">
		<ui:define name="body">
			<f:view>
				<!-- Site wrapper -->
				<div style="min-height:100%">

								<div class="modal fade" id="progressBar" tabindex="-1"
									role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
									<div class="modal-dialog">
										<div class="modal-content">
											<div class="modal-header">

												<h4 class="modal-title" align="center">Cargando</h4>
											</div>
											<div class="modal-body">

												<div class="progress progress-striped active">
													<div class="progress-bar progress-bar-success"
														role="progressbar" aria-valuenow="100" aria-valuemin="0"
														aria-valuemax="100" style="width: 100%"></div>
												</div>

											</div>

										</div>
									</div>
								</div>
								<!-- Barra de Progreso -->

								<!-- Inicio Contenido Principal-->

								<h:form id="form">
									<p:messages id="msg" autoUpdate="true" closable="true" />

									<div class="ui-grid ui-grid-responsive">
										<div class="ui-grid-row">
											<div class="ui-grid-col-6">
												<div class="panel panel-default">

													<div class="panel-heading" align="center"
														style="font-family: sans-serif; font-size: 150%;">Categorias</div>

													<div class="panel-body">

														<div align="left">

															<p:scrollPanel style="height:200px; width:auto;"
																mode="native">
																<p:tree id="txtFavorito"
																	value="#{categoriasView.raizFavorito}" var="categoria"
																	selectionMode="single"
																	style="margin: 0 auto;width:auto;height:30px"
																	selection="#{categoriasView.seleccionFavorito}">
																	
																	<p:ajax event="select" update=":form:txtArticulos" listener="#{categoriasView.favoritoSeleccionado}"
																	onstart="$('#progressBar').modal('show');" oncomplete="$('#progressBar').modal('hide');" />
																	
																	<p:treeNode icon="#{categoria.icono}">
																		<h:outputText value="#{categoria.nombre}" />
																	</p:treeNode>

																</p:tree>
																<p:tree id="txtColecciones"
																	value="#{categoriasView.raizCategorias}"
																	var="categoria" selectionMode="single"
																	style="margin: 0 auto;width:auto;height:168px"
																	selection="#{categoriasView.seleccionCategoria}">
																	
																	<p:ajax event="select" update=":form:txtArticulos" listener="#{categoriasView.categoriaSeleccionada}"
																	onstart="$('#progressBar').modal('show');"  oncomplete="$('#progressBar').modal('hide');"/>

																	<p:treeNode icon="#{categoria.icono}">
																		<h:outputText value="#{categoria.nombre}" />
																	</p:treeNode>

																</p:tree>
															</p:scrollPanel>
															<button onclick="crearArticulo();"
													                class="btn btn-primary btn-block" type="button" >Crear Articulo</button>

														</div>

													</div>

												</div>
											</div>
											<div class="ui-grid-col-6">
												<div class="panel panel-default">

													<div class="panel-heading" align="center"
														style="font-family: sans-serif; font-size: 150%;">Articulos</div>

													<div class="panel-body">

														<div align="left">

															<p:scrollPanel mode="native"
																style="height:200px; width:auto;">
																<p:tree id="txtArticulos"
																	value="#{categoriasView.raizArticulos}" var="articulo"
																	selectionMode="single"
																	style="margin: 0 auto;width:auto;height:198px"
																	selection="#{categoriasView.seleccionArticulo}">
																	
																	<p:ajax event="select" listener="#{categoriasView.onArticuloSeleccionado}"
																	onstart="$('#progressBar').modal('show');" oncomplete="$('#progressBar').modal('hide');" />

																	<p:treeNode icon="ui-icon-document">
																		<h:outputText value="#{articulo.nombre}" title="#{articulo.codigoArti}"/>
																	</p:treeNode>

																</p:tree>
															</p:scrollPanel>
															
															<div class="btn-group btn-group-justified">
															<a onclick="modificarArticulo();" class="btn btn-info">Modificar Articulo</a>
															
															<a onclick="eliminarArticulo();" class="btn btn-danger">Eliminar Articulo</a>
                                                            </div>															
														
														</div>

													</div>

												</div>
											</div>
										</div>

									</div>

									<div class="panel panel-default" style="height: 480px">

										<div class="panel-heading" align="center" style="font-family: sans-serif; 
										font-size: 150%;">Detalle Articulo</div>
                                        <p:scrollPanel style="height:480px; width:auto;" mode="native">
										<div class="panel-body">

											<div>
												<p:outputLabel value="Nombre:"
													rendered="#{categoriasView.renderedDetalle}" />
												<p:inputText id="txtNombre"
													value="#{categoriasView.txtNombreArticulo}"
													class="form-control" readonly="true"
													rendered="#{categoriasView.renderedDetalle}" />

												<p:outputLabel value="Descripción:"
													rendered="#{categoriasView.renderedDetalle}" />
												<p:inputTextarea id="txtDescripcion"
													value="#{categoriasView.txtDescripcion}"
													class="form-control" autoResize="false" readonly="true"
													rendered="#{categoriasView.renderedDetalle}" />

												<p:outputLabel value="Autor:"
													rendered="#{categoriasView.renderedDetalle}" />
												<p:inputText id="txtAutor"
													value="#{categoriasView.txtAutor}" class="form-control"
													readonly="true"
													rendered="#{categoriasView.renderedDetalle}" />
													
													<p:outputLabel value="Anexo: "
													rendered="#{categoriasView.renderedDetalle}" />
												<h:commandButton id="btonDescargar" value="Descargar"
													ajax="false" icon="ui-icon-arrowthick-1-s"
													class="form-control btn btn-success"
													rendered="#{categoriasView.renderedDetalle}">
													<p:fileDownload value="#{categoriasView.file}" />
												</h:commandButton>
    
                                               <p:media value="/#{categoriasView.url}" height="600px" width="100%" 
                                               player="pdf" rendered="#{categoriasView.renderedDetalle}"/>
												
												<p:spacer width="20" height="20" />

												<div align="center">

													<p:commandLink value=" Favorito"
														style="font-weight: bold; color:orange;"
														class="btn btn-default fa fa-star"
														action="#{categoriasView.agregarArticuloFavorito}"
														rendered="#{categoriasView.renderedDetalleFavorito==false and categoriasView.renderedDetalle}" />

													<p:spacer height="15" />

													<p:commandLink value=" Eliminar"
														style="font-weight: bold; color:red;"
														class="btn btn-default fa fa-star"
														action="#{categoriasView.quitarArticuloFavorito}"
														rendered="#{categoriasView.renderedDetalleFavorito}" />

													<p:spacer height="15"
														rendered="#{categoriasView.renderedDetalleFavorito}" />

													<p:commandLink value=" Me Gusta"
														style="font-weight: bold; color:blue;"
														class="btn btn-default fa fa-thumbs-up"
														action="#{categoriasView.meGustaArticulo}"
														rendered="#{categoriasView.renderedDetalle}" />

												</div>

												<p:separator rendered="#{categoriasView.renderedDetalle}" />
											</div>

										</div>
										</p:scrollPanel>

									</div>

									<div id="fb-root" />

								</h:form>
								<!-- Fin Contenido Principal-->

								<!-- Inicio Dialogo Crear RSS-->
								<h:form id="formDlg">

									<div class="modal fade" id="dlgArticulo" tabindex="-1"
										role="dialog" aria-labelledby="myModalLabel"
										aria-hidden="true">
										<div class="modal-dialog">
											<div class="modal-content">
												<div class="modal-header">

													<h4 class="modal-title" align="center">Crear Articulo</h4>
												</div>
												<div class="modal-body">

													<p:messages id="messages" autoUpdate="false"
														closable="true" />
														
													<p:outputLabel value="Categoria:" />
													<h:selectOneMenu id="txtCategoria" value="#{categoriasView.categoria}" class="form-control">
                                                       <f:selectItems value="#{categoriasView.categorias}" />
                                                    </h:selectOneMenu>
													
													<p:outputLabel value="Nombre:" />
													<p:inputText id="txtNombre"
														value="#{categoriasView.txtNombreArticulo}"
														class="form-control" />

													<p:outputLabel value="Descripción:" />
													<p:inputTextarea id="txtDescripcion"
														value="#{categoriasView.txtDescripcion}"
														class="form-control" autoResize="false" />

													<p:outputLabel value="Autor:" />
													<p:inputText id="txtAutor"
														value="#{categoriasView.txtAutor}" class="form-control"
														redisplay="true" />

													<p:outputLabel value="Anexo:" />
													<p:fileUpload
														fileUploadListener="#{categoriasView.handleFileUpload}"
														mode="advanced" dragDropSupport="false" update="messages"
														allowTypes="/(\.|\/)(pdf)$/"
														label="Selecionar PDF" id="idfile" cancelLabel="Cancelar"
														uploadLabel="Subir" auto="true"
														invalidFileMessage="El archivo debe ser PDF" />

													<p:spacer height="10px" />

													<div align="center">

														<p:commandButton value="Crear" class="btn btn-primary"
															action="#{categoriasView.guardarArticulo}"
															update=":form:txtArticulos, :form:txtColecciones, formDlg:messages" />
														<p:commandButton value="Cerrar" class="btn btn-danger"
															onclick="$('#dlgArticulo').modal('hide');" />
													</div>

												</div>

											</div>
										</div>
									</div>
								</h:form>
								<!-- Fin Dialogo Crear RSS-->

								<!-- Inicio Dialogo Modificar RSS-->
								<h:form id="formDlg2">

									<div class="modal fade" id="dlgModificar" tabindex="-1"
										role="dialog" aria-labelledby="myModalLabel"
										aria-hidden="true">
										<div class="modal-dialog">
											<div class="modal-content">
												<div class="modal-header">

													<h4 class="modal-title" align="center">Modificar
														Articulo</h4>
												</div>
												<div class="modal-body" id="panelModificar">

													<p:messages id="messages" autoUpdate="false"
														closable="true" />

													<p:outputLabel value="Nombre:" />
													<p:inputText id="txtNombre"
														value="#{categoriasView.txtNombreArticulo}"
														class="form-control" />

													<p:outputLabel value="Descripción:" />
													<p:inputTextarea id="txtDescripcion"
														value="#{categoriasView.txtDescripcion}"
														class="form-control" autoResize="false" />

													<p:outputLabel value="Autor:" />
													<p:inputText id="txtAutor"
														value="#{categoriasView.txtAutor}" class="form-control"
														redisplay="true" />

													<p:outputLabel value="Anexo:" />
													<p:fileUpload
														fileUploadListener="#{categoriasView.handleFileUpload}"
														mode="advanced" dragDropSupport="false" update="messages"
														allowTypes="/(\.|\/)(pdf)$/"
														label="Selecionar PDF" id="idfile" cancelLabel="Cancelar"
														uploadLabel="Subir"
														invalidFileMessage="El archivo debe ser PDF" />

													<p:spacer height="10px" />

													<div align="center">

														<p:commandButton value="Modificar" class="btn btn-primary"
															action="#{categoriasView.guardarArticuloModificado}"
															update=":form:txtArticulos, :form:txtColecciones, formDlg2:messages" />

														<p:commandButton value="Cerrar" class="btn btn-danger"
															onclick="$('#dlgModificar').modal('hide');" />

													</div>

												</div>

											</div>
										</div>
									</div>
								</h:form>
								<!-- Fin Dialogo Modificar -->
								
								
								<!-- Inicio Dialogo Eliminar RSS-->
								<h:form id="formDlg3">

									<div class="modal fade" id="dlgEliminarArticulo" tabindex="-1"
										role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
										<div class="modal-dialog">
											<div class="modal-content">
												<div class="modal-header">
													<h4 class="modal-title" align="center">Eliminar
														Articulo</h4>
												</div>
												
												<div class="modal-body" >

													<div align="center">

														<p:commandButton value="Deseo Eliminar Articulo" class="btn btn-primary" update=":form:txtArticulos"
															action="#{categoriasView.action_delete}" oncomplete="$('#dlgEliminarArticulo').modal('hide');"/>

														<p:commandButton value="Cancelar" class="btn btn-danger"
															onclick="$('#dlgEliminarArticulo').modal('hide');" />

													</div>

												</div>

											</div>
										</div>
									</div>
									
								</h:form>
								<!-- Fin Dialogo Eliminar -->
                          </div>

				<!-- ./wrapper -->

				<script type="text/javascript">
					window.___gcfg = {
						lang : 'es-	es'
					};

					(function() {
						var po = document.createElement('script');
						po.type = 'text/javascript';
						po.async = true;
						po.src = '../js/plusone.js';
						var s = document.getElementsByTagName('script')[0];
						s.parentNode.insertBefore(po, s);
					})();
				</script>


				<script>
					window.fbAsyncInit = function() {
						FB.init({
							appId : '356963437842660',
							status : true,
							cookie : true,
							xfbml : true
						});
					};

					// Load the SDK Asynchronously   
					(function(d) {
						var js, id = 'facebook-jssdk', ref = d
								.getElementsByTagName('script')[0];
						if (d.getElementById(id)) {
							return;
						}
						js = d.createElement('script');
						js.id = id;
						js.async = true;
						js.src = "../js/all.js";
						ref.parentNode.insertBefore(js, ref);
					}(document));
				</script>

				<script>
				
				function crearArticulo() {
					$(document.getElementById('formDlg:messages')).fadeOut();
					$(document.getElementById('formDlg:txtNombre')).val("");
					$(document.getElementById('formDlg:txtDescripcion')).val("");
					$(document.getElementById('formDlg:txtAutor')).val("");				
					$('#dlgArticulo').modal('show');
				}

				function modificarArticulo() {

					var articuloSeleccionado =$(document.getElementById('form:txtArticulos_selection')).val();
					
					if(articuloSeleccionado!=""){

						 var idseleccion='form:txtArticulos:'+articuloSeleccionado;
	                      var articuloCompleto=document.getElementById(idseleccion);
	                      var elementos=articuloCompleto.getElementsByClassName('ui-treenode-label ui-corner-all ui-state-highlight')[0];

	                      var idArticulo=($(elementos).find('span:first')).attr("title");

		                   jQuery.ajax({
		                        type: "GET",
		                        url: '#{facesContext.externalContext.request.scheme}://#{facesContext.externalContext.request.serverName}:#{facesContext.externalContext.request.serverPort}#{facesContext.externalContext.request.contextPath}/rest/categoria/traerArticulo/'+idArticulo+'/',
		                        contentType: "application/json",
		                        dataType:"json",
		                        success: function (data, status, jqXHR) {

	                            var codUsuarioLogin=document.getElementById("usuario").getAttribute("title");

			                        if(data.codigoUsua_Usuarios==codUsuarioLogin){
			    						$(document.getElementById('formDlg2:txtNombre')).val($(document.getElementById('form:txtNombre')).val());
			    						$(document.getElementById('formDlg2:txtDescripcion')).val($(document.getElementById('form:txtDescripcion')).val());
			    						$(document.getElementById('formDlg2:txtAutor')).val($(document.getElementById('form:txtAutor')).val());
			    						
			    						$('#dlgModificar').modal('show');
				                    }else{
				                    	alertify.error("El articulo seleccionado no es de tu autoria");
						            }
		                        	 
		                        },

		                        error: function (jqXHR, status) {
		                            console.log("Error");
		                        }
		                    });
						

					}else{
						alertify.error("Seleccione Articulo a Modificar");
					}
					
				}

				function eliminarArticulo() {			

                    var articuloSeleccionado =$(document.getElementById('form:txtArticulos_selection')).val();

                    if(articuloSeleccionado!=""){
                      var idseleccion='form:txtArticulos:'+articuloSeleccionado;
                      var articuloCompleto=document.getElementById(idseleccion);
                      var elementos=articuloCompleto.getElementsByClassName('ui-treenode-label ui-corner-all ui-state-highlight')[0];

                      var idArticulo=($(elementos).find('span:first')).attr("title");

	                   jQuery.ajax({
	                        type: "GET",
	                        url: '#{facesContext.externalContext.request.scheme}://#{facesContext.externalContext.request.serverName}:#{facesContext.externalContext.request.serverPort}#{facesContext.externalContext.request.contextPath}/rest/categoria/traerArticulo/'+idArticulo+'/',
	                        contentType: "application/json",
	                        dataType:"json",
	                        success: function (data, status, jqXHR) {

                            var codUsuarioLogin=document.getElementById("usuario").getAttribute("title");

		                        if(data.codigoUsua_Usuarios==codUsuarioLogin){
		                        	$('#dlgEliminarArticulo').modal('show');
			                    }else{
			                    	alertify.error("El articulo seleccionado no es de tu autoria");
					            }
	                        	 
	                        },

	                        error: function (jqXHR, status) {
	                            console.log("Error");
	                        }
	                    });

				   }else{
						    alertify.error("Seleccione Articulo a Eliminar");					   
				   }
				}

					function start() {
						PF('statusDialog').show();
					}

					function stop() {
						PF('statusDialog').hide();
					}
				</script>
			</f:view>
		</ui:define>
	</ui:composition>

</h:body>

</html>